<template>
  <div class="app-container">
    <!-- <el-button type="primary" @click="handleAdd">创建会员</el-button> -->

    <el-table :data="orderList" style="width: 100%;margin-top:30px;" stripe>
      <el-table-column 
        prop="code" 
        align="center" 
        label="订单编号">
      </el-table-column>
      <el-table-column 
        prop="receiverName" 
        align="center" 
        label="收货人">
      </el-table-column>
      <el-table-column 
        prop="receiverPhone" 
        align="center" 
        label="电话">
      </el-table-column>
      <el-table-column 
        prop="receiverAddress" 
        align="center" 
        label="收货地址"
        :show-overflow-tooltip='true'>
      </el-table-column>
      <el-table-column 
        prop="totalAmount" 
        align="center" 
        label="订单总金额">
      </el-table-column>
      <el-table-column 
        prop="payAmount" 
        align="center" 
        label="应付金额">
      </el-table-column>
      <el-table-column 
        prop="status" 
        align="center" 
        label="订单状态">
      </el-table-column>
      <el-table-column 
        prop="note" 
        align="center" 
        label="订单备注"
        :show-overflow-tooltip='true'>
      </el-table-column>
      <el-table-column 
        prop="receiveat" 
        align="center" 
        label="确认收货时间">
      </el-table-column>
      <el-table-column 
        prop="createat" 
        align="center" 
        label="创建时间">
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope)">修改订单信息</el-button>
          <el-button type="text" size="small" @click="handleDetail(scope)">详情</el-button>
          <el-button v-if="scope.row.status === '待发货'" type="text" size="small" @click="handleDelivery(scope)">发货</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="block">
        <span class="demonstration"></span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
    </div>

    <!-- 修改订单信息 -->
    <el-dialog :visible.sync="dialogVisible" title="修改订单信息">
      <el-form :model="order" label-width="80px" label-position="left">
        <el-form-item label="订单编号">
          {{ order.code }}
          <!-- <el-input v-model="order.code" placeholder="订单编号" :disabled="true" /> -->
        </el-form-item>
        <el-form-item label="收货人">
          <el-input v-model="order.receiverName" placeholder="收货人姓名" />
        </el-form-item>
        <el-form-item label="收货人电话">
          <el-input v-model="order.receiverPhone" placeholder="收货人电话" />
        </el-form-item>
        <el-form-item label="收货地址">
          <el-input v-model="order.receiverProvince" placeholder="省" />
          <el-input v-model="order.receiverCity" placeholder="市" />
          <el-input v-model="order.receiverRegion" placeholder="区" />
          <el-input v-model="order.receiverDetailAddress" placeholder="详细地址" />
        </el-form-item>
        <el-form-item label="订单备注">
          <el-input v-model="order.note" placeholder="订单备注" />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmSubmit">确认</el-button>
      </div>
    </el-dialog>

    <!-- 订单发货 -->
    <el-dialog :visible.sync="deliveryDialogVisible" title="发货">
      <el-form :model="order" label-width="80px" label-position="left">
        <el-form-item label="订单编号">
          <el-input v-model="order.code" placeholder="订单编号" />
        </el-form-item>
        <el-form-item label="物流公司">
          <el-input v-model="order.deliveryCompany" placeholder="物流公司" />
        </el-form-item>
        <el-form-item label="物料单号">
          <el-input v-model="order.deliverySn" placeholder="物料单号" />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="deliveryDialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmDelivery">确认</el-button>
      </div>
    </el-dialog>

    <!-- 订单详情 -->
    <el-dialog :visible.sync="detailDialogVisible" title="订单详情">
      <!-- 订单基本信息 -->
      <el-card class="box-card">
        <el-row :gutter="10">
          <el-col :span="6"><div class="grid-content">订单编号：</div></el-col>
          <el-col :span="6"><div class="grid-content">订单状态：</div></el-col>
        </el-row>
      </el-card>

      <!-- 收货人信息 -->
      <el-card class="box-card">
        <el-row :gutter="10">
          <el-col :span="6"><div class="grid-content">收货人：</div></el-col>
          <el-col :span="6" :offset="2"><div class="grid-content">联系电话：</div></el-col>
          <el-col :span="6" :offset="2"><div class="grid-content">邮编：</div></el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6"><div class="grid-content">收货地址：</div></el-col>
          <el-col :span="18"><div class="grid-content"></div></el-col>
        </el-row>
      </el-card>

      <!-- 订单行 -->
      <el-card class="box-card">
        <el-row :gutter="10">
          <el-col :span="6"><div class="grid-content">订单行：</div></el-col>
        </el-row>

        <el-table :data="orderItemList" style="width: 100%;margin-top:30px;" stripe>
          <el-table-column 
            prop="title" 
            align="center" 
            label="商品名称">
          </el-table-column>
          <el-table-column 
            prop="title" 
            align="center" 
            label="规格">
          </el-table-column>
          <el-table-column 
            prop="parent.title" 
            align="center" 
            label="图片">
          </el-table-column>
          <el-table-column 
            prop="level" 
            align="center" 
            label="单价">
          </el-table-column>
          <el-table-column 
            prop="name" 
            align="center" 
            label="数量">
          </el-table-column>
          <el-table-column 
            prop="createat" 
            align="center" 
            label="合计">
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 金额信息 -->
      <el-card class="box-card">
        <el-row :gutter="10">
          <el-col :span="6"><div class="grid-content">总金额：</div></el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6"><div class="grid-content">运费：</div></el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6"><div class="grid-content">促销优惠：</div></el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6"><div class="grid-content">优惠券抵扣：</div></el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6"><div class="grid-content">积分抵扣：</div></el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6"><div class="grid-content">实付金额：</div></el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6"><div class="grid-content">可获得积分：</div></el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6"><div class="grid-content">可获得成长值：</div></el-col>
        </el-row>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import path from 'path'
import { deepClone } from '@/utils'
import { getMenus, getParents, addMenu, updateMenu, delMenu } from '@/api/permission'
import { getOrders, updateOrder, orderDelivery, getOrderDetail, getOrderItem } from '@/api/order'

const defaultRole = {
  key: '',
  name: '',
  description: '',
  routes: []
}

export default {
  data() {
    return {
      order: {
        id: '',
        code: '',
        receiverName: '',
        receiverPhone: '',
        receiverProvince: '',
        receiverCity: '',
        receiverRegion: '',
        receiverDetailAddress: '',
        note: '',
        deliveryCompany: '',
        deliverySn: ''
      },
      orderDetail: {
        id: '',
        code: '',
        status: '',
        receiverName: '',
        receiverPhone: '',
        receiverPostCode: '',
        receiverAddress: '',
        totalAmount: '',
        payAmount: '',
        couponAmount: '',
        discountAmount: '',
        deliveryat: '',
        deliverySn: '',
        deliveryCompany: '',
        confirmStatus: '',
        createat: '',
        orderItemList: []
      },
      orderList: [],
      orderItemList: [],
      dialogVisible: false,
      detailDialogVisible: false,
      deliveryDialogVisible: false,
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  computed: {
    routesData() {
      return this.routes
    }
  },
  created() {
    // Mock: get all routes and roles list from server
    this.getOrders()
  },
  methods: {
    async getOrders() {
      console.log("getOrders page",this.page)
      const res = await getOrders(this.page)
      console.log("getOrders",res)
      const { pageNum, total, list } = res.data

      this.orderList = list
      this.page.currentPage = pageNum
      this.page.total = total
    },
    async handleEdit(scope) {
      const res = await getOrderItem(scope.row.id)
      console.log("handleEdit",res)

      this.dialogVisible = true
      this.order = res.data
    },
    async handleDelivery(scope) {
      const res = await getOrderItem(scope.row.id)
      console.log("handleEdit",res)

      this.deliveryDialogVisible = true
      this.order = res.data
    },
    async handleDetail(scope) {
      const res = await getOrderDetail(scope.row.id)
      console.log("handleDetail",res)

      this.orderDetail = res.data
      this.dialogType = 'edit'
      this.detailDialogVisible = true
    },
    async confirmSubmit() {
      await updateOrder(this.order).then(() => {
        this.$message({
          type: 'success',
          message: '更新订单信息成功'
        })
      })

      this.dialogVisible = false
      this.getOrders()

    },
    async confirmDelivery() {
      await orderDelivery(this.order).then(() => {
        this.$message({
          type: 'success',
          message: '发货成功'
        })
      })

      this.deliveryDialogVisible = false
      // this.getOrders()

    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
